<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue入门案例</title>
  <script src="js/vuejs-2.5.16.js"></script>
<!--    <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>-->

</head>
<body>
<!--
      指定一块区域，在这块区域中可以使用vue
      只有这块区域中的标签，才能使用vue和数据绑定
   -->
  <div id="app">
<!--    将vue的视图zhongmessage绑定给div,可以使用插值(EL)表达式-->
        <div>{{message}}</div>
        <div>{{username}}</div>
        <div>{{[1,2,3,4][2]}}</div>//获取下标为2的值
  </div>
<script type="text/javascript">
    var vue=new Vue({
        el:"#app",
        data:{
            message:"HelloWorld",
            username:"张三"
        }//数据模型，需要展示图中的数据
    })
</script>
</body>
</html>